<template>
  <div class="SvgIcon"> 
    <svg :style="{ width: iconWeight, height: iconHeight }">
      <use :xlink:href="prefix + iconName" :fill="iconColor"></use>
    </svg>
  </div>
</template>

<script lang="ts" name="SvgIcon" setup>
// 组件传来的值
defineProps({
  // xlink:href属性的前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  // 接收父组件传来的图标的名字
  iconName: {
    type: String,
    default: '',
  },
  // 接收父组件传来的图标颜色
  iconColor: {
    type: String,
  },
  // 接收父组件传来的宽高属性
  iconWeight: {
    type: String,
    default: '16px',
  },
  iconHeight: {
    type: String,
    default: '16px',
  },
})
</script>

<style lang="less" scoped></style>
